<template>
  <div class="bgc-fff" style="margin-top: 1.17rem;">
    <div class="main">
      <!-- 报班历史列表 -->
      <!-- :classHistoryData='classListData' -->
      <v-list ref="addclasshistorylist00"  v-if='!cancelClassShow' @cancel-now-class='cancelNowClass' ></v-list>
      <!-- 取消报班原因 -->
      <div v-else>
        <!-- time -->
        <div class="main-time bor-bottom">
          <img class="mr15" :src="staticImgData.timeUrl" alt="">
          <div class="f14 c-445c95 ta-l line-h32">
            {{driverParam.gmtCreate | formatDate}}
          </div>
        </div>
        <!-- fill-box -->
        <div class="fill-box  bor-bottom">
          <div class="fill-item fill-b">
            <i class="mr25 bgc-1e90ff "></i>
            <div class="fill-input bor-bottom">
              <!-- <input type="text"  placeholder="请输入意向起运地(城市)"
                                        v-model.trim="driverParam.wantStartPlace">  -->
              <div>{{driverParam.wantStartPlace}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="fill-item">
            <i class="mr25 bgc-ff9b7b "></i>
            <div class="fill-input">
              <!-- <input type="text" class="" placeholder="请输入意向目的地(城市)"
                                        v-model.trim="driverParam.wantEndPlace">   -->
              <div>{{driverParam.wantEndPlace}}</div>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
        <!-- input -->
        <div class="input-cells bor-bottom">
          <div class="f-fl input-label">当前位置</div>
          <!-- <input type="tel" class="cell-input" placeholder="请输入数目"
                        maxlength="3"  v-model.trim="driverParam.canLoadNum" /> -->
          <div class="cell-input" >{{driverParam.nowPlace}}</div>
        </div>
        <div class="input-cells bor-bottom ">
          <div class="f-fl input-label">可装载台数</div>
          <!-- <input type="tel" class="cell-input" placeholder="请输入数目"
                        maxlength="3"  v-model.trim="driverParam.canLoadNum" /> -->
          <div class="cell-input">{{driverParam.canLoadNum}}台</div>
        </div>
        <div class="input-cells">
          <div class="f-fl input-label">计划装车时间</div>
          <!-- <input type="tel" class="cell-input" placeholder="请输入数目"
                        maxlength="3"  v-model.trim="driverParam.canLoadNum" /> -->
          <div class="cell-input">{{driverParam.loadTime | formatDate}}</div>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>
        <!--  -->
        <div class="pad15 ta-l f14">
          取消原因
        </div>
        <div class="pad-l-r15 pad-t5 pad-b10">
          <textarea name="" v-model.trim="driverParam.comment" id="textarea1" cols="30" rows="3" placeholder="请输入取消原因"></textarea>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>
        <!-- btn -->
        <!-- <div class="pad-l-r15" style="margin-top:1rem;">
          <p class="large-btn bgc-01a4f6" @click="subButton">提交</p>
        </div> -->
        <div style="height:.15rem;"></div>
        <!--button-->
        <div class="loginout-btn">
          <div class="pad-l-r15 ">
            <p class="large-btn bor-1-DEDEDE c-333 bgc-1e90ff" @click="subButton">提交</p>
          </div>
        </div>
      </div>

    </div>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script type="text/ecmascript-6">
import AddClassHistoryList from '@/components/driver/driverMeCheckin/add_checkin_history_list'
import * as AddClassApi from '@/api/addClass'
import Loading from '@/components/common/loading/loading'
import Utils from '@/utils/util'
import { Toast } from 'mint-ui'
export default {
  name: 'add_class_history',
  // props: ['classListData'],
  data() {
    return {
      staticImgData: {
        timeUrl: require('@/assets/image/v1/user/add_class_history/icon_time.png')
      },
      driverParam: {
        wantStartPlace: '',
        wantEndPlace: '',
        nowPlace: '', // 当前位置
        canLoadNum: '', // 数量
        loadTime: '', // 期望装车时间
        gmtCreate: '', // 创建报班时间
        comment: '', // 取消原因
        id: ''
      },
      loadingShow: false,
      cancelClassShow: false
    }
  },
  components: {
    'v-loading': Loading,
    'v-list': AddClassHistoryList
  },
  created() {
  },
  mounted() {

  },
  filters: {
    formatDate(time) {
      const date = new Date(time)
      return Utils.formatTime(date, 'Y-M-D h:m:s')
    }
  },
  methods: {
    goloadPageList: function() {
      // 通过在父组件 通过子组件的ref 来触发 子组件上的事件，从而继续 往下一级子组件 触发下一级组件身上的事件
      this.$refs.addclasshistorylist00.loadPageList()
    },
    subButton: function(clickEvent) {
      const that = this
      const { id, driverId, comment } = that.driverParam
      const cancelClass_params = {
        driverId: driverId,
        id: id,
        comment: comment
      }
      // 提交取消报班原因
      if (clickEvent) {
        const check_res = that.checkParam(cancelClass_params)
        if (check_res) {
          // 暂缺提交取消报班原因api和当前报班编号标示
          that.loadingShow = true
          // 更换父页面 tabindx 发起 获取报班历史信息请求（刷新）
          AddClassApi.getCancelCheckin(cancelClass_params).then(res => {
            that.loadingShow = false
            if (res.code === 0) {
              Toast({
                message: '提交成功',
                duration: 1000
              })
            }
          }).catch(res => {
            that.loadingShow = false
            console.warn('error', res)
          })
          that.$emit('to-addclasshistory', 0)
          that.cancelClassShow = false
        }
      }
    },
    checkParam: function(param) {
      const check_param = param
      if (!check_param.comment) {
        Toast({
          message: '请先填写内容!'
        })
        return
      }
      return true
    },
    cancelNowClass: function(toData) {
      const that = this
      // 取消当前报班
      that.cancelClassShow = toData.tabindexIs
      const { amtExp, checkinAddr, destRegion, departRegion, driverId, id, gmtExpLoad, gmtCreate } = toData.itemData
      that.driverParam = {
        id: id,
        driverId: driverId,
        wantStartPlace: departRegion,
        wantEndPlace: destRegion,
        nowPlace: checkinAddr,
        canLoadNum: amtExp,
        loadTime: gmtExpLoad,
        gmtCreate: gmtCreate
      }
    }
  }
}
</script>

<style scoped>
@import '../../../styles/util.css';
/* common */
.large-btn{
  border-radius: .08rem;
}
.cell-input{
  color: #000;
}
.input-label{
  color:#999;
}
/* main */
.main-time{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: .06rem .15rem;
}
.main-time>img{
  width: .13rem;
  height: .13rem;
}
#textarea1{
  border: none;
  outline: none;
  width: 100%;
  font-size: .14rem;
}
</style>
